<template>
  <el-container class="main-container">
    <keep-alive>
      <Header :subtitle="subtitle" :header-height="headerHeight" :cover-name="coverName" />
    </keep-alive>
    <keep-alive>
      <div v-loading="listLoading" class="main">
        <TagCloud :data="list" :config="config" @clickTag="clickTag" />
      </div>
    </keep-alive>
    <el-footer>
      <Footer />
    </el-footer>
  </el-container>
</template>

<script type="text/ecmascript-6">
import Header from '../components/Header'
import Footer from '../components/Footer'
import TagCloud from '../components/TagCloud'
import { getTags } from '../api/blog'

export default {
  components: {
    Header,
    Footer,
    TagCloud
  },
  data() {
    return {
      subtitle: 'Tags',
      coverName: '/cover/cover7.jpg',
      headerHeight: 70,
      listQuery: {},
      list: [],
      listLoading: true,
      config: {
        width: 900,
        height: 300
      }
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    fetchList() {
      this.listLoading = true
      getTags(this.listQuery).then(response => {
        this.list = response.data
        this.listLoading = false
      })
    },
    clickTag(tag) {
      this.$router.push('/tag/' + tag.id)
    }
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
    .main-container {
        background-color: #eeeeee;

        .main {
            max-width: 1140px;
            width: 100%;
            padding: 3rem 15px;
            margin-right: auto;
            margin-left: auto;
            position: relative;
            margin-top: -3rem;
            background-color: #fff;
            border-radius: .5rem;
            z-index: 3;
            -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) !important;
            box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19) !important;
        }
    }
</style>
